<template>
  <view class="page">
    <view class="header">
      <!-- <navigator url="/pages/me/staff/staff" hover-class="navigator-hover">
        <image src="/static/back.png" mode="aspectFit"></image>
      </navigator> -->
      <text class="title">员工管理</text>
      <view class="more-options">
        <button type="primary" icon="more-filled" @click="showMoreOptions">更多</button>
      </view>
    </view>

    <view class="employee-list">
      <view v-for="(employee, index) in employees" :key="index" class="employee-item">
        <view class="employee-info">
          <image :src="employee.avatar" mode="aspectFit" class="avatar"></image>
          <view class="info-content">
            <text class="name">{{ employee.name }}</text>
            <text class="role">{{ employee.role }}</text>
            <text class="phone">{{ employee.phone }}</text>
          </view>
        </view>
        <view class="action-buttons">
          <button type="primary" icon="edit" @click="editEmployee(employee)">编辑</button>
          <button type="warn" icon="delete" @click="deleteEmployee(employee)">删除</button>
        </view>
      </view>
    </view>

    <view class="add-employee-button">
      <button type="primary" size="large" @click="addEmployee">添加员工</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        {
          name: '张三',
          role: '商家管理员',
          phone: '13853910086',
          avatar: '/static/image.png'
        },
        {
          name: '李四',
          role: '店长',
          phone: '13853910086',
          avatar: '/static/image.png'
        },
        {
          name: '王五',
          role: '店员',
          phone: '13853910086',
          avatar: '/static/image.png'
        }
      ]
    };
  },
  methods: {
    showMoreOptions() {
      // Logic to show more options
    },
    editEmployee(employee) {
      // Logic to edit employee
    },
    deleteEmployee(employee) {
      // Logic to delete employee
    },
    addEmployee() {
      // Logic to add employee
    }
  }
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32rpx;
  color: #333;
}

.more-options {
  display: flex;
  align-items: center;
}

.employee-list {
  width: 100%;
  margin-top: 20rpx;
}

.employee-item {
  width: 100%;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.employee-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.info-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.name {
  font-size: 28rpx;
  color: #333;
}

.role {
  font-size: 24rpx;
  color: #666;
}

.phone {
  font-size: 20rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  align-items: center;
}

.add-employee-button {
  width: 100%;
  margin-top: 20rpx;
}
</style>